/* eslint-disable no-undef,function-paren-newline */
import React, { Component } from 'react';
import { Menu, Icon, Button } from 'antd';
import * as config from '../../utils/config';
import styles from './MenuPanel.less';

const { SubMenu } = Menu;
const MenuItemGroup = Menu.ItemGroup;

class MenuPanelComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      expend: false,
      allMenus: [],
    };
  }

  componentWillMount() {
    const url = `${config.server_host}business/getBuMenu?sModelsId=100`;
    this.props.onGetMenuPanel(url);
  }

  componentDidMount() {
    const tabs = document.getElementsByClassName('ant-tabs-content')[0];
    const menusUl = document.getElementById('allNavMenus').getElementsByTagName('ul')[0];
    const menuButton = document.getElementById('allMenus').getElementsByTagName('button')[0];
    tabs.addEventListener('click', () => {
      if (menusUl.style.display === 'block') {
        menusUl.style.display = 'none';
        menuButton.click();
      }
    });
  }

  componentWillReceiveProps(nextProps) {
    const { panelMenus } = nextProps.menuPanel;
    const allMenus = [];
    if (panelMenus.length > 0) {
      panelMenus.forEach((child) => {
        if (child.children === undefined) {
          allMenus.push(
            <Menu.Item
              key={child.sId}
              data-sname={child.sName}
              data-sModelsType={child.sModelType}
            >
              {child.sMenuName}
            </Menu.Item>);
        } else if (child.children !== undefined && child.children.length > 0) {
          allMenus.push(
            <SubMenu
              className={styles.subMenuPanel}
              key={child.sId}
              title={<span>{child.sMenuName}</span>}
              data-sModelsType={child.sModelType}
            >
              {this.handleChildrenData(child.children)}
            </SubMenu>);
        }
      });
      this.setState({ allMenus });
    }
  }

  handleCommonMenu = (e, child) => {
    e.stopPropagation();
    const { sId, sName, sMenuName } = child;
    const value = { sFormId: sId, sFormUrl: sName, sFormName: sMenuName };
    const currentElement = e.target.parentNode.parentNode;
    if (currentElement.className.indexOf('selected') === -1) {
      const addUrl = `${config.server_host}parameter/addParameter?sModelsId=${sId}`;
      this.props.onAddParameter(value, addUrl);
    } else {
      const delUrl = `${config.server_host}parameter/deleteParameter?sModelsId=${sId}`;
      this.props.onDelParameter(value, delUrl);
    }
  };

  handleChildrenData = (data) => {
    const childMenus = [];
    // <span>{child.sMenuName} </span>  这么写会影响刷新
    data.forEach((child) => {
      if (child.children === undefined) {
        if (child.iCommonlyUsed === '1') {
          childMenus.push(
            <Menu.Item key={child.sId} data-sname={child.sName} data-sModelsType={child.sModelType}>
              {child.sMenuName}
              <Icon type="star" theme="filled" id={child.sId} onClick={e => this.handleCommonMenu(e, child)} className="selected" />
            </Menu.Item>);
        } else {
          childMenus.push(
            <Menu.Item key={child.sId} data-sname={child.sName} data-sModelsType={child.sModelType}>
              {child.sMenuName}
              <Icon type="star" theme="filled" id={child.sId} onClick={e => this.handleCommonMenu(e, child)} />
            </Menu.Item>);
        }
      }
      if (child.children !== undefined && child.children.length > 0) {
        childMenus.push(
          <MenuItemGroup title={child.sMenuName} key={child.sId} className={styles.subPanel}>
            { this.handleChildrenData(child.children) }
          </MenuItemGroup>);
      }
    });
    return childMenus;
  };

  handleTabClick = (e) => {
    /* 点击有sName的菜单，增加标签页 */
    const paneKey = new Date().getTime().toString();
    /* Tab标签Id */
    const formId = e.key;
    /* 窗体Id */
    const route = e.item.props['data-sname'];
    const title = e.item.props.children[0];
    const sModelsType = e.item.props['data-sModelsType'];
    const pane = {
      title, route, formId, key: paneKey, sModelsType,
    };
    this.props.onAddPane(pane);
    this.setState({
      expend: false,
    });
  };

  handleButtonClick = () => {
    this.setState({
      expend: !this.state.expend,
    });
  };

  render() {
    const { allMenus } = this.state;
    return (
      <div>
        <Button onClick={this.handleButtonClick}>
          <Icon type="bars" />全部导航
        </Button>
        <div id="allNavMenus">
          <Menu
            subMenuCloseDelay={0.3}
            subMenuOpenDelay={0.3}
            onClick={this.handleTabClick}
            style={{ width: 200, display: this.state.expend ? 'block' : 'none' }}
            mode="vertical"
            className={styles.menuPanel}
          >
            {allMenus}
          </Menu>
        </div>
      </div>
    );
  }
}

export default MenuPanelComponent;
